
<template>
  <div class="navBarRoot">
    <div class="navItem" :class="{active:activeNum === i }" v-for="  (v,i) in navBarData" :key="v.name" @click="handleClick(v,i)">
      {{v.name}}
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from 'vue'
export default {
  props: {
    navBarData: {
      type: Array,
      default() {
        return []
      }
    },
    currentTag: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  setup(p, { emit }) {
    const data = reactive({
      activeNum: 0
    })
    const handleClick = (v, i) => {
      data.activeNum = i
      emit('itemNavClick', v)
    }

    onMounted(() => {
      p.navBarData.forEach((v, i) => {
        if (v.name === p.currentTag.name) {
          data.activeNum = i
        }
      })
    })
    return {
      ...toRefs(data),
      handleClick
    }
  }
}
</script>

<style scoped>
.navBarRoot {
  display: flex;
  align-items: center;
  text-align: center;
}
.navItem {
  margin-right: 5px;
  padding: 3px 6px;

  cursor: pointer;
}
.active {
  color: var(--red);
  background-color: var(--navBg);
  border-radius: 11px;
}
</style>